<!-- 我的弹窗 -->

<template>
  <WebModal word="班时">
    <WebForm class="ScheduleTime-MyModal">
      <EasyRow col2>
        <FormInput label="班时名称" bind="timeName" :max="5" required />
      </EasyRow>

      <FormSliderRange
        label="班时"
        bind="time"
        :max="TOTAL * 1.5"
        :step="10"
        :minGap="60"
        :maxGap="TOTAL"
        :marks="MAP.MARKS"
        :transTip="transTip"
        @change="changeTime"
      />

      <FormSliderRange
        label="休息时间"
        bind="relax"
        :min="one.time[0] + 10"
        :max="one.time[1] - 10"
        :step="10"
        :init="[one.time[0] + 10, one.time[0] + 10]"
        :marks="relaxMarks"
        :transTip="transTip"
        @change="changeRelax"
      />

      <FormRadio label="文字颜色" bind="foreColor" :dict="DICT.TEXT_COLOR_DICT" required />

      <EasyRow>
        <FormColor label="背景颜色" bind="backColor" noClear auto required />
        <div
          v-for="item in MAP.BG_COLOR_LIST"
          :key="item[0]"
          :style="{ backgroundColor: item[0] }"
          class="inFlexCC"
          @click="changeColor(item)"
        >
          <i v-if="item[0] === one.backColor" class="el-icon-check" :style="{ color: one.foreColor }" />
        </div>
      </EasyRow>

      <FormSlot label="日程预览">
        <CalendarPreview :obj="one" />
      </FormSlot>

      <FormSlot label="班次预览">
        <QueuePreview :obj="one" hasText />
        <QueuePreview :extra="one" />
      </FormSlot>
    </WebForm>
  </WebModal>
</template>

<script>
// ============================== 导入依赖 ============================== //

import CORE from '@/CORE'
import UTIL from '../../UTIL'

// ============================== 导出组件 ============================== //

export default {
  /**
   * 名称定义 (实际使用名称)
   */
  name: 'MyModal',

  /**
   * 混入列表 (配置选项合并)
   */
  mixins: [CORE.mixWeb()],

  /**
   * 组件导入 (Abc.vue + Abc/index.vue)
   */
  ...CORE.components(
    require.context('../../components', true, /vue$/),
    require.context('./', true, /vue$/),
  ),

  /**
   * 计算属性 (慎用箭头函数)
   */
  computed: {
    /**
     * 一天的总分钟数
     */
    TOTAL: () => UTIL.TOTAL,

    /**
     * 休息时间的标记
     */
    relaxMarks() {
      const min = this.one.time[0] + 10
      const max = this.one.time[1] - 10
      return {
        [min]: UTIL.transTime(min),
        [max]: UTIL.transTime(max),
        ...this.MAP.MARKS,
      }
    },
  },

  /**
   * 本地方法 (轻量重要在前)
   */
  methods: {
    /**
     * 切换班时
     */
    changeTime([begin, end]) {
      if (begin > this.TOTAL - 10) this.one.time = [this.TOTAL - 10, end]
      this.one.timeBegin = UTIL.transTime(this.one.time[0])
      this.one.timeEnd = UTIL.transTime(end)
    },

    /**
     * 切换休息时间
     */
    changeRelax([begin, end]) {
      if (begin === end) {
        this.one.relaxBegin = ''
        this.one.relaxEnd = ''
      } else {
        this.one.relaxBegin = UTIL.transTime(begin)
        this.one.relaxEnd = UTIL.transTime(end)
      }
    },

    /**
     * 切换颜色
     */
    changeColor([backColor, foreColor]) {
      Object.assign(this.one, { backColor, foreColor })
    },

    /**
     * 转换时间
     */
    transTip(minutes) {
      const minute = minutes % 60
      const hour = (minutes - minute) / 60 % 24
      return `${hour > 9 ? '' : '0'}${hour}:${minute > 9 ? '' : '0'}${minute}`
    },
  },
}
</script>

<style lang="scss">
@import './index.scss';
</style>
